<template>
  <div class="selector column q-pa-md">
    <div class="title">{{ $t('top.languageSelector.title') }}</div>
    <div class="row q-gutter-x-sm q-mt-md">
      <language-chip
        v-for="lang in selected"
        :key="lang.code"
        :code="lang.code"
        active
      />
    </div>
    <q-separator class="q-my-md" />
    <q-input
      outlined
      filled
      dense
      v-model="filterStr"
      bg-color="primary"
      label-color="#4B4B4B"
      color="accent"
      class="filter-input q-mb-sm"
      :label="$t('top.languageSelector.inputPlaceholder')"
    >
      <template v-slot:prepend>
        <q-icon name="mdi-magnify" />
      </template>
    </q-input>
    <q-scroll-area class="col selector-container q-mb-md q-pa-md">
      <div class="column">
        <template v-if="filterStr === ''">
          <q-checkbox
            v-model="selected"
            v-for="(lang, index) in languageList"
            :key="index"
            :label="lang.label"
            :val="lang"
          />
        </template>
        <template v-else>
          <q-checkbox
            v-model="selected"
            v-for="(lang, index) in filtered"
            :key="index"
            :label="lang.label"
            :val="lang"
          />
        </template>
      </div>
    </q-scroll-area>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  computed,
  onBeforeUnmount,
  onMounted,
  watch,
} from 'vue';
import LanguageConfig from 'src/models/LanguageConfig';
import LanguageChip from 'components/LanguageChip.vue';
import Me from 'src/models/Me';
import { useGlobalStore } from 'stores/global-store';
import { useUserStore } from 'src/stores/user-store';

export default defineComponent({
  components: {
    LanguageChip,
  },
  setup() {
    const globalStore = useGlobalStore();
    const userStore = useUserStore();
    const filterStr = ref('');
    const selected = ref<LanguageConfig[]>([]);
    const currentUser = computed<Me>(() => userStore.currentUser as any);
    onMounted(() => {
      if (currentUser.value) {
        selected.value = userStore.mySelectedLanguage;
      } else {
        selected.value = userStore.selectedLanguage;
      }
    });
    const languageList = computed(() => globalStore.languageConfig);
    const filtered = ref<LanguageConfig[]>([]);
    onBeforeUnmount(() => {
      const codes = selected.value.map((language) => {
        return language.code;
      });
      if (currentUser.value) {
        userStore.setLanguage(codes);
      } else {
        userStore.setSelectedLanguage(codes);
      }
    });
    watch(filterStr, () => {
      filtered.value = languageList.value.filter((lang) =>
        lang.label.toLocaleLowerCase().includes(filterStr.value)
      );
    });
    return {
      currentUser,
      selected,
      filterStr,
      languageList,
      filtered,
    };
  },
});
</script>
<style lang="sass" scoped>

.selector
  width: 370px
  height: 468px
  background-image: linear-gradient(to bottom right, #2a2a2a, #1e1e1e)
  border-radius: 6px
  .title
    font-size: 16px
    font-weight: bold
  .selector-container
    background-color: $primary
</style>
